<template>
<view class="container">
    <view class="topbar">
        <view :class="(active_menu.order ? 'active' : '')" @tap="changeBar" data-view="order"><text>订单状态</text></view>
        <view :class="(active_menu.detail ? 'active' : '')" @tap="changeBar" data-view="detail"><text>订单详情</text></view>
    </view>
    <view :class="'loop_list ' + (active_menu.order ? '' : 'hide')">
        <scroll-view scroll-y="true" :style="'height:' + loop_list_height + 'px'">
            <view class="position">
                <view class="line"></view>
                <view class="bg_line"></view>
                <block v-for="(item, status) in order_detail.status" :key="status">
                    <view class="end_list">
                        <view class="fl img">
                          <image :src="item.img"></image>
                        </view>
                        <view class="ml_80">
                            <view class="tit clearfix">
                              <text class="fl h2">{{item.status_txt}}</text>
                              <text class="fr p">{{item.dateline}}</text>
                            </view>
                            <view class="tit clearfix">
								                <view class="fl p" v-if="item.status == 2">
                                  <text>店员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>正在为您准备商品</text>
                                </view>
                                <view class="fl p" v-else-if="item.status == 3">
                                  <text>配送员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>正在赶往店铺取货</text>
                                </view>
                                <view class="fl p" v-else-if="item.status == 4">
                                  <text>配送员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>已取货，准备配送，请耐心等待</text>
                                </view>
                                <view class="fl p" v-else-if="item.status == 5">
                                  <text>配送员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>正快速向您靠拢，请耐心等待！</text>
                                </view>
                                <view class="fl p" v-else-if="item.status == 6">
                                  <text>配送员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>已完成配送，欢迎下次光临！</text>
                                </view>
                                <view class="fl p" v-else-if="item.status == 7">
                                    <block v-if="order_detail.order.is_pick_in_store == 3">
                                      <text>店员</text>
                                      <text class="cr">【{{item.name}}】 </text>
                                      <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                      <text>已发货给快递公司,快递单号:{{order_detail.order.express_number}}</text>
                                    </block>
                                    <block v-else>
                                      <text>店员</text>
                                      <text class="cr">【{{item.name}}】 </text>
                                      <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                      <text>将订单改成已消费</text>
                                    </block>
                                </view>

                                <view class="fl p" v-else-if="item.status == 11">
                                  <text>店员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>给您分配</text>
                                </view>

                                <view class="fl p" v-else-if="item.status == 12">
                                  <text>店员</text>
                                  <text class="cr">【{{item.name}}】 </text>
                                  <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                  <text>已经给您发货到配送点</text>
                                </view>

                                <view class="fl p" v-else-if="item.status == 13">
                                    <text>自提点</text>
                                    <text class="cr">【{{item.name}}】 </text>
                                    <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                    <text>已经接到您的货物了</text>
                                </view>

                                <view class="fl p" v-else-if="item.status == 14">
                                    <text>自提点</text>
                                    <text class="cr">【{{item.name}}】 </text>
                                    <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                    <text>已经给您发货了</text>
                                </view>

                                <view class="fl p" v-else-if="item.status == 15">
                                    <text>您在自提点</text>
                                    <text class="cr">【{{item.name}}】 </text>
                                    <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                    <text>已经把您的货提走了</text>
                                </view>

                                <view class="fl p" v-else-if="item.status == 30">
                                    <text>店员</text>
                                    <text class="cr">【{{item.name}}】 </text>
                                    <text class="cb" @tap="callPhone" :data-phone="item.phone">{{item.phone}}</text>
                                    <text>已将订单的总价修改成{{item.note}}</text>
                                </view>
                                <view class="fl p" v-else>{{item.note == '' ? item.des : item.note}}</view>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
        </scroll-view>
        <view class="location">
            <view class="strol">
                <view class="fl img">
                    <image src="https://hf.pigcms.com/static/wxapp/timer_2132249.png"></image>
                </view>
                <view class="p50" @tap="callShop">联系店铺</view>
            </view>
        </view>
    </view>
    <view :class="'detail_list ' + (active_menu.detail ? '' : 'hide')">
        <scroll-view scroll-y="true" :style="'height:' + order_list_height + 'px'">
            <view class="pro_list bw">
                <view class="pro_top">
                    <view class="w60 f91">商品列表</view>
                    <view class="w20 f91">{{order_detail.order.num}}份</view>
                    <view class="w20 ff5">￥{{order_detail.order.goods_price}}</view>
                </view>
                <block v-for="(item, status) in order_detail.order.info" :key="status">
                    <view class="pro_top pro_end">
                        <view class="w60">{{item.name}}</view>
                        <view class="w20">x{{item.num}}</view>
                        <view class="w20">￥{{item.price}}</view>
                    </view>
                </block>
            </view>

            <view class="cus_list bw">
                <view class="cus_n">
                    <text class="fl">客户姓名：</text>
                    <view class="p70">{{order_detail.order.username}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">客户手机：</text>
                    <view class="p70 cb" @tap="callPhone" :data-phone="order_detail.order.userphone">{{order_detail.order.userphone}}</view>
                </view>

                <view class="cus_n">
                    <text class="fl" v-if="order_detail.order.is_pick_in_store == 2">自提地址：</text>
                    <text class="fl" v-else>客户地址：</text>
                    <view class="p70">{{order_detail.order.address}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">配送方式：</text>
                    <view class="p70">{{order_detail.order.deliver_str}}</view>
                </view>

                <block v-if="order_detail.order.is_pick_in_store == 3 && order_detail.order.express_id > 0">
                    <view class="cus_n">
                        <text class="fl">快递公司：</text>
                        <view class="p70">{{order_detail.order.express_name}}</view>
                    </view>
                    <view class="cus_n">
                        <text class="fl">快递单号：</text>
                        <view class="p70">{{order_detail.order.express_number}}</view>
                    </view>
                </block> 
            
            </view>
             
            <view class="cus_list bw">
                <view class="cus_n orderIdLine">
                    <text class="fl">订单编号：</text>
                    <view class="p70">{{order_detail.order.real_orderid}}</view>
                    <view class="copyOrderId" @tap="copyText" :data-text="order_detail.order.real_orderid">复制</view>  
                </view>
                <view class="cus_n">
                    <text class="fl">下单时间：</text>
                    <view class="p70">{{order_detail.order.create_time}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.pay_time > 0">
                    <text class="fl">支付时间：</text>
                    <view class="p70">{{order_detail.order.pay_time_txt}}</view>
                </view>
                <view class="cus_n" v-else>
                    <text class="fl">到货时间：</text>
                    <view class="p70">{{order_detail.order.expect_use_time}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">商品总价：</text>
                    <view class="p70">￥{{order_detail.order.goods_price}}</view>
                </view>
                <view class="cus_n" v-if="order_detail.order.freight_charge > 0">
                    <text class="fl">配送费用：</text>
                    <view class="p70">￥{{order_detail.order.freight_charge}}</view>
                </view>
                <view class="cus_n" v-if="order_detail.order.packing_charge > 0">
                    <text class="fl">{{order_detail.store.pack_alias ? order_detail.store.pack_alias : '打包费'}}：</text>
                    <view class="p70">￥{{order_detail.order.packing_charge}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">订单总价：</text>
                    <view class="p70">￥{{order_detail.order.total_price}}</view>
                </view>
                <view class="cus_n" v-if="order_detail.order.merchant_reduce > 0">
                    <text class="fl">店铺优惠：</text>
                    <view class="p70">￥{{order_detail.order.merchant_reduce}}</view>
                </view>
                <view class="cus_n" v-else-if="order_detail.order.balance_reduce > 0">
                    <text class="fl">平台优惠：</text>
                    <view class="p70">￥{{order_detail.order.balance_reduce}}</view>
                </view>
                <view class="cus_n" v-else-if="order_detail.order.card_discount != 0 && order_detail.order.card_discount != 10">
                    <text class="fl">会员卡：</text>
                    <view class="p70">{{order_detail.order.card_discount}} 折优惠</view>
                </view>
                <view class="cus_n">
                    <text class="fl">实付金额：</text>
                    <view class="p70">￥{{order_detail.order.price}}</view>
                </view>
            </view>

            <view class="cus_list bw">
                <block v-if="order_detail.order.score_used_count > 0">
                    <view class="cus_n">
                        <text class="fl">使用积分：</text>
                        <view class="p70">{{order_detail.order.score_used_count}}</view>
                    </view>
                    <view class="cus_n">
                        <text class="fl">积分抵现：</text>
                        <view class="p70">￥{{order_detail.order.score_deducte}}</view>
                    </view>
                </block>

                <view class="cus_n" v-if="order_detail.order.card_give_money > 0">
                    <text class="fl">会员卡余额：</text>
                    <view class="p70">￥{{order_detail.order.card_give_money}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.merchant_balance > 0">
                    <text class="fl">商家余额：</text>
                    <view class="p70">￥{{order_detail.order.merchant_balance}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.balance_pay > 0">
                    <text class="fl">平台余额：</text>
                    <view class="p70">￥{{order_detail.order.balance_pay}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.payment_money > 0">
                    <text class="fl">在线支付：</text>
                    <view class="p70">￥{{order_detail.order.payment_money}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.card_id > 0">
                    <text class="fl">店铺优惠券金额：</text>
                    <view class="p70">￥{{order_detail.order.card_price}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.coupon_id > 0">
                    <text class="fl">平台优惠券金额：</text>
                    <view class="p70">￥{{order_detail.order.coupon_price}}</view>
                </view>

                <view class="cus_n" v-if="order_detail.order.pay_type == 'offline' && order_detail.order.third_id != ''">
                    <text class="fl">线下需支付：</text>
                    <view class="p70">￥{{order_detail.order.offline_price}}</view>
                </view>
            </view>


            <view class="cus_list bw">
                <view class="cus_n">
                    <text class="fl">支付状态：</text>
                    <view class="p70 ff5">{{order_detail.order.pay_status_print}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">支付方式：</text>
                    <view class="p70">{{order_detail.order.pay_type_str}}</view>
                </view>
                <view class="cus_n">
                    <text class="fl">订单状态：</text>
                    <view class="p70">{{order_detail.order.status_str}}</view>
                </view>

                <!--<if condition="($order['paid'] && $order['status'] eq 0) OR ($order['is_pick_in_store'] eq 2 AND $order['paid'] AND !in_array($order['status'], array(2,3,4,5)))">
			        <li>消费二维码：<span id="see_storestaff_qrcode" style="color:#FF658E;">查看二维码</span></li>
			    </if>-->

            </view>

            <view class="cus_list bw">
                <block v-if="order_detail.order.cue_field != ''">
                    <block v-for="(item, cue_field) in order_detail.order.cue_field" :key="cue_field">
                        <view class="cus_n">
                            <text class="fl">{{item.title}}：</text>
                            <view class="p70">{{item.txt}}</view>
                        </view>
                    </block>
                </block>
                <view class="cus_n" v-if="order_detail.order.invoice_head != ''">
                    <text class="fl">发票信息：</text>
                    <view class="p70">{{order_detail.order.invoice_head}}</view>
                </view>
                <view class="cus_n">
                    备注
                </view>
                <view class="cus_n">
                    {{order_detail.order.desc ? order_detail.order.desc : '无'}}
                </view>
            </view>
        </scroll-view>
        <view class="location" v-if="order_detail.order.paid == 0  && (order_detail.order.status < 2 || order_detail.order.status == 7)">
            <view class="bot clearfix">
                <view class="fr" v-if="order_detail.order.paid == 0  && (order_detail.order.status < 2 || order_detail.order.status == 7)" @tap="goPay">支付订单</view>
                <!--view class="fr">取消订单</view-->
            </view>
        </view>
    </view>
</view>

</template>

"<script>
import common from '../../utils/common.js'
var app = getApp();
var sysRes = {};
var rpxUnit = 0;

export default {
  data() {
    return {
      order_id: 0,
      active_menu: {
        order: true,
        detail: false
      },
      loop_list_height: 0,
      order_detail: {},
      order_list_height: 0
    };
  },

  onUnload: function () {},
  onHide: function () {},
  onShow: function () {
	  // #ifdef H5
	  common.hideWxShare()
	  // #endif
  },
  onReady: function () {},
  onLoad: function (options) {
    sysRes = wx.getSystemInfoSync();
    rpxUnit = sysRes.windowWidth / 750;
    this.setData({
      order_id: options.order_id,
      loop_list_height: sysRes.windowHeight - 88 * rpxUnit - 142 * rpxUnit
    });
    common.post('My&a=shop_order_detail', {
      order_id: options.order_id
    }, "setOneContent", this);
  },
  components: {},
  props: {},
  methods: {
    callPhone: function (e) {
      common.callPhone(e.currentTarget.dataset.phone);
    },
    changeBar: function (e) {
      var active_menu = this.active_menu;

      for (var i in active_menu) {
        active_menu[i] = false;
      }

      active_menu[e.currentTarget.dataset.view] = true;
      this.setData({
        active_menu: active_menu
      });
    },
    setOneContent: function (result) {
      this.setData({
        order_detail: result,
        order_list_height: result.order.paid == 1 || result.order.status >= 2 && result.order.status != 7 ? sysRes.windowHeight - 88 * rpxUnit : this.loop_list_height
      });
      wx.hideToast();
    },
    goPay: function (e) {
      wx.navigateTo({
        url: "../pay/index?order_id=" + this.order_id + '&type=shop'
      });
    },
    callShop: function (e) {
      common.callPhone(this.order_detail.storeName.phone);
    },
    copyText: function (e) {
      common.copyText(e.currentTarget.dataset.text);
    },
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
.topbar{ display: -webkit-box; width: 100%; background: #fff; border-top:#f1f1f1 2rpx solid;border-bottom:#f1f1f1 2rpx solid; }
.topbar view{ -webkit-box-flex: 1; line-height: 40rpx; height: 40rpx; padding: 20rpx 0; text-align: center; border-bottom: 4rpx solid #fff;}
.topbar view text{  border-right: #f1f1f1 2rpx solid; display: block}
.topbar view text::last-child{ border-right: 0px;}
.topbar view.active{ border-bottom: 4rpx solid #fe2947; color: #fe2947;}
.loop_list .end_list{ padding: 20rpx 30rpx; position: relative}
.loop_list .end_list:after{content: " "; display: block; position: absolute;background-color: #fff;height: 20rpx;width: 20rpx;border-left: #f1f1f1 solid 2rpx;border-top: #f1f1f1 solid 2rpx;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);left: 100rpx;top: 50%; margin-top: -10rpx; }
.loop_list .end_list .img image{ width: 100%; height: 100%;}
.loop_list .end_list .img{width: 50rpx; height: 50rpx; position: absolute; top: 50%; margin-top: -40rpx; left: 30rpx; background: #f4f4f4;z-index: 9; padding: 15rpx 0; }
.loop_list .end_list .ml_80{ margin-left: 80rpx; background: #fff; padding: 20rpx; border: #f1f1f1 2rpx solid; min-height: 80rpx;}
.loop_list .end_list .ml_80 .tit{ line-height: 40rpx; }
.loop_list .end_list .ml_80 .tit .p{ color: #b9bcc0; font-size: 24rpx;}
.loop_list{ position: relative}
.loop_list .line{ position: absolute; background-color: #f94429; width: 2rpx; height: 100%; top: 50rpx; left: 55rpx;}
.bg_line{position: absolute; background-color: #f4f4f4;width: 100rpx;bottom:-50rpx;height: 100rpx;z-index:2 }
.detail_list .pro_list{  border-top: #f1f1f1  2rpx solid;}
.detail_list .pro_top{ display: -webkit-box;  padding: 20rpx 30rpx;  border-bottom: #f1f1f1 2rpx solid; background: #f8f8f8; line-height: 32rpx;  }
.detail_list .pro_end{ background: #fff; font-size: 28rpx;}
.detail_list .pro_top view{ -webkit-box-flex: 1;}
.detail_list view.ff5{ color: #ff5f32; font-size: 30rpx; }
.detail_list view.f91{ color: #919191;}
.detail_list .pro_top view.w60{ width: 60%; text-align: left}
.detail_list .pro_top view.w20{ width: 20%; text-align: right}

.detail_list .cus_list{ margin-top: 20rpx;border-top: #f1f1f1  2rpx solid; }
.detail_list .cus_list:last-child{ margin-bottom:10rpx; }
.detail_list .cus_list .cus_n{ border-bottom: #f1f1f1  2rpx solid; line-height: 40rpx; padding: 20rpx 30rpx; min-height: 40rpx;}
.detail_list .cus_list .cus_n .p70{ margin-left: 140rpx;}

.location{ position: fixed; bottom: 0rpx; left: 0rpx; height: 140rpx; background: #fff; border-top: #f1f1f1 2rpx solid; width: 100%; z-index: 10}
.location .bot{ padding:30rpx;  height: 80rpx; line-height: 80rpx; text-align: center; color: #fff;}
.location .bot view{ border-radius: 10rpx; padding: 0 30rpx;}
.location .bot .fl{ background: #5fb038; }
.location .bot .fr{ background: #ff5f32; }
.location .strol{ height: 66rpx; padding: 37rpx 30rpx;}
.location .strol .img{ width: 66rpx; height: 66rpx;}
.location .strol image{ width: 100%; height: 100%;}
.location .strol .p50{ margin-left: 100rpx; background:#fe2947; border-radius: 10rpx; text-align: center; color: #fff; line-height: 66rpx;}
.position{ position: relative}

.orderIdLine{position:relative;}
.copyOrderId{
  position:absolute;
  right:0;
  top:0;
  padding:20rpx 40rpx;
}
</style>